<template>
	<view class="content">
		<view class="list" v-if="dataList.length">
			<view  class="list-item" v-for="(v,i) in dataList" :key="i">
				<view class="user u-flex">
					<u--image :src="v.avatar" shape="circle" width="44rpx" height="44rpx">
					</u--image>
					<text>{{v.nickname}}</text>
					<!-- 添加同意通过，修改的状态时，时发起人可以编辑 -->
					<!-- <u-icon name="edit-pen" class="editbutton" @click="toDetail(item.id)"></u-icon> -->
				</view>
				<view  class="item-content" v-for="(item,index) in v.list" :key="index">
					<view class="u-flex is-top">
						<view class="u-flex-item">上传于：{{item.createtime}}</view>
						<view class="u-flex-item" @click="is_top_click(item,index)" v-if="item.is_faqi_ren">{{item.is_top?'取消置顶':'设为置顶'}}</view>
					</view>
					<view class="title">
						<text class="title-mask" v-if="item.is_top&&item.is_faqi_ren">置顶</text>
						{{item.content}}
					</view>
					<view class="images">
						<view class="iamges-item u-flex" v-for="(zitem,zindex) in item.files" :key="zindex">
							<!-- <view class="new-tip">
								更新
							</view> -->
							<!-- <u--image v-if="zitem.is_img == 1" :src="zitem.fullurl" radius="16rpx" width="136rpx" height="136rpx">
							</u--image> -->

							<!-- <view v-if="zitem.is_img == 0" class="file-box u-flex" @click.stop="handleDownload(zitem)">
								<u-icon name="attach" color="#4871C0" size="24"></u-icon>
								<text class="file-text">{{zitem.filename}}</text>
							</view> -->
							<view class="file-box u-flex" @click.stop="handleDownload(zitem)">
								<u-icon name="attach" color="#4871C0" size="24"></u-icon>
								<text class="file-text">{{zitem.filename}}</text>
							</view>
						</view>
					</view>
					<!-- <view class="file-box u-flex" @click.stop="handleDownload(item.files)">
						<u-icon name="attach" color="#4871C0" size="24"></u-icon>
						<text class="file-text">{{item.files.filename}}</text>
					</view> -->
					<view class="step-box">
						<u-steps current="1" direction="column">
							<view class="" v-for="(sitem,sindex) in item.check" :key="sindex">
								<u-steps-item :title="sitem.check_text" :desc="sitem.createtime_text"
									:contents="sitem.content">
									<text v-if="sitem.status == 1" class="slot-icon" slot="icon">
										<u-icon name="checkmark-circle" color="#4871C0" size="20"></u-icon>
									</text>
									<text v-if="sitem.status == 0" class="slot-icon" slot="icon">
										<u-icon name="close-circle" color="#FF7A00" size="20"></u-icon>
									</text>
								</u-steps-item>
								<!--              <view class="reject">-->
								<!--                {{sitem.content}}-->
								<!--              </view>-->
							</view>
						</u-steps>
					</view>
					<view class="buttons u-flex" v-if="item.is_check == 1 && item.is_show == 1">
					<view class="button-box button1" @click="rejectTopicFun(item.id)">
						驳回
					</view>
					<view class="button-box button2" @click="adoptTopicFun(item.id)">
						通过
					</view>
				</view>
			    </view>
			</view>
		</view>
		<!-- 加载更多 -->
		<!-- <u-loadmore v-if="dataList.length" :status="loadStatus" /> -->

		<u-empty v-if="!dataList.length && !isLoading" mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png">
		</u-empty>

		<!-- 驳回弹窗 -->
		<u-modal :show="show" @confirm="confirm" @cancel="cancel" ref="uModal" title="驳回理由" confirmText="确定"
			:showCancelButton="true">
			<view class="slot-content reason-content">
				<u--textarea v-model="reason" height="100" placeholder="请驳回理由~" border="surround" confirmType="done">
				</u--textarea>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getTopicList,
		meetnewLists,
		operationTopic,
		operationTopic2,
		topicsetTop
	} from '@/api/meetApi.js'
	export default {
		data() {
			return {
				id: '',
				// page: 1,
				// limit: 12,
				// lastPage: 0,
				loadStatus: '',
				dataList: [],
				show: false,
				reason: '',
				chooseId: ''
			}
		},
		onShow() {
			console.log("-----------11返回来", )
			this.id = this.$route.query.id;
			this.dataList = [];
			// this.page = 1;
			this.getData();
		},
		onHide() {},
		onLoad(options) {
			// this.id = options.id;
			// this.getData();
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/tabbar-1-detial/uploadTopics/editTopics?id=' + id
				});
			},
			// 获取数据
			getData() {
				this.loadStatus = 'loading';
				this.isLoading = true;
				let params = {
					// page: this.page,
					// check_type: 'vote',
					// status: 1,
					// limit: this.limit,
					meet_id: this.id
				};
				meetnewLists(params).then(res => {
					if (res.code == 1) {
						this.isLoading = false;
						// uni.stopPullDownRefresh();
						// this.lastPage = res.data.last_page
						// this.loadStatus = this.page < res.data.last_page ? 'loadmore' : 'nomore';
						this.dataList = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3500
						});
					}

				})
			},
			is_top_click(item,index){
				topicsetTop({is_top:!item.is_top,id:item.id}).then(res => {
					if(res.code===1){
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3500
						});
						this.getData();
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						});
					}
					
				})
				
			},
			// 点击附件预览
			handleDownload(item) {
				console.log("=====item", item)
				let params = {
					url: item.fullurl, // 需要预览文件的地址(必填，可以使用相对路径)
					name: item.filename, // 需要预览文件的文件名(不填的话取url的最后部分)
					size: item.filesize, // 需要预览文件的字节大小(必填)
					type: item.mimetype
				}
				this.$store.dispatch('yulan', params)
			},
			// 取消
			cancel() {
				this.show = false;
				reason: ''
			},
			// 驳回
			rejectTopicFun(id) {
				this.show = true;
				this.chooseId = id;
			},
			// 驳回
			confirm() {
				this.isLoading = true;
				let params = {
					topic_id: this.chooseId,
					status: 0,
					content: this.reason
				};
				operationTopic(params).then(res => {
					this.isLoading = false;
					console.log(res)
					this.show = false;
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
					this.dataList = []
					this.getData()
				})
			},
			// 通过
			adoptTopicFun(id) {
				this.isLoading = true;
				let params = {
					topic_id: id,
					status: 1,
				};
				operationTopic(params).then(res => {
					this.isLoading = false;
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1000
					});
					this.dataList = []
					this.getData()
				})

			}
		}
	}
</script>

<style>
	.content {
		background-color: #F8F8F8;
		min-height: 100vh;
	}

	.u-flex {
		display: flex;
		align-items: center;
	}
	.item-content{
		margin-top: 20rpx;
		border-top: 1px solid #f3f3f3;
	}
	.is-top{
		justify-content: space-between;
	}
    .u-flex-item{
		color:#999999;
		font-size: 24rpx;
		line-height: 100rpx;
	}
	.list {
		padding: 20rpx 30rpx;
	}

	.list-item {
		background: #FFFFFF;
		border-radius: 16rpx;
		opacity: 1;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.user {
		position: relative;
		width: 100%;
	}

	.user text {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 10rpx;
	}

	.user .editbutton {
		position: absolute;
		right: 0;
	}

	.title {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		line-height: 52rpx;
	}
    .title-mask{
		background-color: #4871C0;
		font-size: 20rpx;
		padding: 0 4rpx;
		color: #FFFFFF;
		margin-right: 6rpx;
		vertical-align: top;
	}
	.images {
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}

	.iamges-item {
		margin-right: 40rpx;
		position: relative;
	}

	.file-box {
		position: relative;
		margin: 20rpx 0;
		padding: 20rpx;
		background: #F8F9FC;
		border-radius: 16rpx;
		opacity: 1;
		font-size: 28rpx;
		font-weight: 500;
		color: #4871C0;

	}

	.file-text {
		display: inline-block;
		word-break: break-all
	}

	/deep/.u-text__value--main,
	/deep/ .u-text__value--content {
		font-size: 14px !important;
		color: #303133 !important;
	}

	.button-box {
		width: 128rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		border-radius: 16rpx;
		opacity: 1;
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 20rpx;
	}

	.button1 {
		color: #4871C0;
		border: 1px solid #4871C0;
		margin-left: auto;
	}

	.button2 {
		color: #FFFFFF;
		background: #4871C0;
		margin-left: 20rpx;
	}

	.new-tip {
		position: absolute;
		top: 0;
		right: 0;
		width: 56rpx;
		height: 32rpx;
		line-height: 32rpx;
		background: #FF7A00;
		border-radius: 0px 16rpx 0px 10rpx;
		opacity: 1;
		font-size: 18rpx;
		color: #fff;
		z-index: 22;
		text-align: center;
	}

	.reject {
		padding-left: 126rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		line-height: 52rpx;
	}

	.reason-content {
		width: 100%;
		border-radius: 8rpx;
		opacity: 1;
	}

	/deep/ .u-modal__content {
		text-align: center !important;
	}

	/deep/.u-textarea {
		background: #F8F8F8;
		border-radius: 8rpx;
		opacity: 1;
		text-align: left;
	}

	/deep/.uni-textarea-placeholder {
		text-align: left;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}

	/deep/.u-text__value--tips {
		color: #606266 !important;
	}

	/deep/.u-steps-items {
		flex-direction: row !important;
		width: 100%;

	}

	/deep/ .u-steps-item__content {
		width: 100%;
	}

	/deep/ .u-steps-item__content .u-text {
		width: 100%;
	}
</style>
